<template>

  <div class="app">
	  <!-- 整个系统的头部 -->
<mt-header fixed title="zhou vue.js系统"></mt-header>
<!-- 返回按钮 -->
<div class="back"  v-if="isShow">
	<a @click="goback"><img src="../static/images/arrow_left_r.png" alt=""></a>
</div>

<!-- <br><br> -->
     <!-- 中间路由组件站位付！页面跳转用的 -->

	<router-view></router-view>
 



  	<!-- 整个系统的底部 --> 
<nav class="mui-bar mui-bar-tab" id="nav-show">
	<router-link class="mui-tab-item" to="/Home">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</router-link>

    <router-link class="mui-tab-item" to="/search">
		<span class="mui-icon mui-icon-search"></span>
		<span class="mui-tab-label">搜索</span>
	</router-link>

    <router-link class="mui-tab-item" to="/shopcar">
		<span class="mui-icon mui-icon-email-filled">
			<span class="mui-badge" id="badge">0</span>
			</span>
		<span class="mui-tab-label">购物</span>
	</router-link>

	<router-link class="mui-tab-item" to="/memder">
	<span class="mui-icon mui-icon-contact"></span>
		<span class="mui-tab-label">会员</span>
	</router-link>
	
</nav>
 

  </div>
</template>

<script>

// 注册commonvue.js（用来接收goodsinfovue.vue中通过vueobj.$emit() 发送过来数据
import {vueobjvue} from './kits/commonvue.js';
// 注册接收事件
vueobjvue.$on('shopdata',function(todata){
	// console.log('todata=' + todata);
	let badge = document.getElementById('badge');
	let count = badge.innerText - 0;//获取原始值
	count+=todata;//在原始值上增加新数据
	//新值
	badge.innerText = count;

	});

export default {
 		data(){
 			return{
				 isShow:false  //控制返回按钮显示隐藏(ps:比生命周期方法好用点)
				 
 			}
		 }
		 //  加载根组件创建完后触发(生命周期的一种方法之一)
		//  ,create(){
		// 	this.isShow = false;
		//  }
		,watch:{
			 //监视当前路由对象 $route 。如果url中路由变化就触发这个方法
			"$route":function(newval,oldval){
				if(newval.path.toLowerCase() == '/home'){
					this.isShow = false;
				}else{
					this.isShow = true;
				}
			}
		 },
		 methods:{
			 goback(){
				 this.$router.go(-1);//返回上层
			 }
		 }
}


</script>

<style scoped>
/* @import url("../static/css/site.css"); */
.mint-header.is-fixed{
	z-index: 10;
}
.back{
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 50;
}
.back a img{
	width: 20px;
	height: 20px;
}
</style>
